<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" media="all" th:href="@{/admin/layui/css/layui.css}">
    <link rel="stylesheet" media="all" th:href="@{/admin/style/admin.css}">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">修改密码</div>
                <div class="layui-card-body" pad15>
                    <div class="layui-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">当前密码</label>
                            <div class="layui-input-inline">
                                <input type="password" name="password" id="password" lay-verify="required"
                                       lay-verType="tips" autocomplete="off" class="layui-input" placeholder="请输入当前密码"
                                       maxlength="20">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">设置密码</label>
                            <div class="layui-input-inline">
                                <input type="password" name="repassword" id="repassword" lay-verify="pass"
                                       lay-verType="tips" autocomplete="off" class="layui-input" placeholder="请输入新密码"
                                       maxlength="20">
                            </div>
                            <div class="layui-form-mid layui-word-aux"></div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">确认密码</label>
                            <div class="layui-input-inline">
                                <input type="password" name="repassword2" id="repass" lay-verify="repass"
                                       lay-verType="tips" autocomplete="off" class="layui-input" placeholder="请输入确认密码"
                                       maxlength="20">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="setMyPass">确认修改</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script th:src="@{/webjars/JavaScript-MD5/js/md5.js}"></script>
<script th:src="@{/admin/layui/layui.js}"></script>
<script>
    layui.config({
        base: '/admin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use([
        'index', 'form', 'admin', 'layer'
    ], function () {
        var $ = layui.$, form = layui.form, admin = layui.admin, layer = layui.layer;

        form.verify({
            pass: [
                /^[\S]{1,20}$/
                , '必填项不能为空'
            ]
            //确认密码
            , repass: function (value) {
                if (value !== $('#repassword').val()) {
                    return '两次密码输入不一致';
                }
            }
        });

        //设置密码
        form.on('submit(setMyPass)', function (data) {
            data.field.password = md5(data.field.password);
            data.field.repassword = md5(data.field.repassword);
            //提交修改
            admin.req({
                url: 'updPass'
                , data: data.field
                , type: 'POST'
                , done: function (res) {
                    $('#password').val('');
                    $('#repassword').val('');
                    $('#repass').val('');
                    layer.msg(res.msg, {icon: 1});
                }
                , success: function (res) {
                }
            });
            return false;
        });
    });
</script>
</html>
